
 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>JS实现京东式竖排二级导航效果</title>
 <script type="text/javascript">
     function navShow(){
		 var nav = document.getElementById('nav');
		 var navs = nav.getElementsByTagName("li");
		 for(var i=0;i<navs.length;i++){
		    navs[i].onmouseover = function(){
				 this.getElementsByTagName('dl')[0].style.display = "block";
				 this.style.backgroundColor="#36C1AF";
			 }
			 navs[i].onmouseout = function(){
				 this.getElementsByTagName('dl')[0].style.display = "none";
				 this.style.backgroundColor="";
			 }
		 }
     }
     window.onload = navShow;
 </script>
 <style>
     *{
         font-family:Microsoft YaHei;
         margin:0;
         padding:0;
     }
     body{width:100%;}
     ul{list-style: none;}
     a{text-decoration: none;}
     #header{
         height:850px;
         line-height:50px;
     }
     #header h2,#header h3{
         font-weight:500;
     }
     #header h2{
         color:#000000;
         font-size:18px;
         width:180px;
         text-align: center;
         background:#0D2E49;
     }
     #header h3{color:#000000;font-size:16px;}
   
     #nav {
         width:180px;
         background:rgba(0, 102, 173, 0.5);
         z-index:999;
     }
     #nav li{
         height:40px;
         padding-left:40px;
         line-height: 40px;
         position:relative;
     }
     #nav h3{height:40px;}
     #nav li dl{
         position:relative;
         left:140px;
         top:-40px;
         width:150px;
         background:#fff;
         display:none;
         padding:8px 10px;
     }
     #nav dt{
         width:150px;
         line-height: 30px;
         height:30px;
         background:#36C1AF;
         color:#fff;
         text-align: center;
     }
     #nav dd a{
         display:block;
         height:30px;
         width:150px;
         font-size:14px;
         color:#858585;
     }
     #nav dd a:hover{
         text-decoration: underline;
     }
     #content{
         height:500px;
     }
	 #main{
	   background:#cccccc;
	 }
 </style>
 </head>
 <body>
 <div id="main">
     <div id="header">
         <div class="mycenter">
             <ul id="nav">
                 <li>
                     <h3>帐号管理</h3>
                     <dl>
                         <dt>帐号管理</dt>
                         <dd>
                             <a href="#">修改密码</a>
                             <a href="#">修改用户名</a>
                             <a href="#">设置密保问题</a>
                         </dd>
                     </dl>
                 </li>
                 <li>
                     <h3>首页管理</h3>
                     <dl>
                         <dt>首页管理</dt>
                         <dd>
                             <a href="#">轮转照片设置</a>
                             <a href="#">产品展示照片设置</a>
                             <a href="#">底部信息修改</a>
                         </dd>
                     </dl>
                 </li>
                 <li>
                     <h3>产品管理</h3>
                     <dl>
                         <dt>产品管理</dt>
                         <dd>
                             <a href="#">增加新产品</a>
                             <a href="#">管理全部产品</a>
                             <a href="#">类别管理</a>
                         </dd>
                     </dl>
                 </li>
                 <li>
                     <h3>新闻管理</h3>
                     <dl>
                         <dt>新闻管理</dt>
                         <dd>
                             <a href="#">发布新闻</a>
                             <a href="#">全部新闻管理</a>
                             <a href="#">增加系列</a>
                             <a href="#">新闻系列管理</a>
                         </dd>
                     </dl>
                 </li>
                 <li>
                     <h3>反馈管理</h3>
                     <dl>
                         <dt>反馈管理</dt>
                         <dd>
                             <a href="#">管理所有反馈</a>
                         </dd>
                     </dl>
                 </li>
                 <li>
                     <h3>权限管理</h3>
                     <dl>
                         <dt>权限管理</dt>
                         <dd>
                             <a href="#">添加新管理员</a>
                             <a href="#">查看所有账号权限</a>
                             <a href="#">查看申诉</a>
                         </dd>
                     </dl>
                 </li>
                 <li>
                     <h3>功能管理</h3>
                     <dl>
                         <dt>功能管理</dt>
                         <dd>
                             <a href="#">一级功能设置</a>
                         </dd>
                     </dl>
                 </li>
             </ul>
         </div>
     </div>
</div>
 </body>
 </html>
